/*通用*/
*{ margin: 0; padding: 0;}
html,body{ width: 4.8rem;box-sizing: border-box;overflow-x: hidden;}
.fl{ float: left;}
.fr{ float: right;}
.dn{ display: none;}
img{ display: block;}
@font-face {
    font-family: 'fzktjt';
    src: url('../font/fzkyjt.TTF');
}
/*index*/
.index,.game{ width: 100%; position: relative;}
.index .bg,.game .bg{ width: 100%;display: block;}
.index .begin{ display: block; width: 2.07rem; height: 0.72rem;position: absolute; top: 6rem; left: 50%; margin-left: -1.03rem;}
.index .begin img{ display: block; width: 100%; height: 100%;}
.alert_bg{display: none; width: 100%; height: 100%; background: #000; opacity: 0.3; position: fixed; top: 0; left: 0; z-index: 99;}
.index .gif{ width: 4.3rem; position: absolute; top: 0.5rem; left: 50%; margin-left: -2.15rem;}


/*game*/
.game .btn{ width: 1.6rem; position: absolute; top: 6.8rem;}
.game .btn img{ width: 100%;}
.game .again{ left: 0.55rem;}
.game .listbtn{ right: 0.55rem;}
.game .c{ width: 4.4rem; position: absolute; top: 2.5rem; left: 0;}
.progress{ position: absolute; top: 2.1rem;right: 0; width: 0.7rem; height: 3.45rem;}
.progress img{ width: 100%; height: 100%; position: absolute; z-index: 9;  top: 0; left: 0;}
.progress .in{ width: 0.2rem; height: 3.1rem;background: linear-gradient(#db1b00, #f5dd15); position: absolute; bottom: 0.3rem; left: 0.2rem; border-radius: 0.1rem 0.1rem 0 0}
.progress .wrap{width: 100%; height: 100%; overflow: hidden!important;}
.add{position: absolute; top: 2.6rem; right: 0.7rem; width: 0.55rem; height: 0.45rem;}
.add img{ width: 100%; height: 100%;}
/*READY*/
.ready img{width: 2.8rem;height: 2rem; position: fixed; top: 2.6rem; left: 50%; margin-left: -1.4rem; z-index: 999;}
/*规则*/
.rule{display: none; width: 3.92rem; height: 6.65rem; background-image: url("../img/rule_bg.png");background-size: contain; background-repeat: no-repeat;background-position: center; z-index: 9999; position: fixed; top: 0.6rem; left: 0.5rem;}
.rule p{ font-family: fzktjt;  color:#fff;}
.rule .title{ font-size: 0.5rem; line-height: 1.1rem; margin-top: 0.5rem; text-align: center}
.rule .tip{ font-size: 0.24rem; line-height: 0.3rem; padding: 0 0.3rem 0.15rem;}
.rule .txt{ text-align: right; font-size: 0.18rem; padding-right: 0.3rem;}
.rule .btn{ width: 1.52rem; height: 0.54rem; display: block; background-image: url("../img/rule_btn.png"); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; left: 50%; margin-left: -0.76rem; bottom: 0.4rem;}
/*排名*/
.list{position: fixed;width: 100%; top: 0; left: 0; display: none; z-index: 99999;}
.list .bg{ width: 100%; display: block;}
.list .close{ position: absolute; width: 0.51rem; height: 0.51rem; top: 0.6rem; right: 0.4rem; z-index: 999999;}
.list .close img,.list .more img,.end .close img{ width: 100%; height: 100%;}
.list p{font-family: fzktjt;  color:#fff;}
.list .title{ width: 100%; font-size: 0.4rem;position: absolute; text-align: center; left: 0; top: 1.2rem;}
.list .more{ width: 0.6rem; height: 0.6rem; position: absolute; bottom: 0.6rem; left: 50%; margin-left: -0.3rem;}
.list .box{ position: absolute; width: 4.2rem; height: 4.6rem; overflow-y: scroll; top: 2.6rem; left: 50%; margin-left: -2.1rem;}
.list .box span{ font-size: 0.32rem; line-height: 0.4rem; }
.list .box .mid{ float: left;}
.list .box .phone{ float: left;}
.list .box .prize{ float: right;}
.list .box .item{ height: 0.4rem; margin-bottom: 0.2rem;overflow: hidden;}
/*留下电话*/
.end{display: none; font-family: fzktjt; width: 4.2rem; height: 6.1rem; position: fixed; top: 0.5rem; left: 50%; margin-left: -2.1rem; background-image: url("../img/end_bg.png"); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 999}
.end .close{position: absolute; width: 0.51rem; height: 0.51rem; top: 0.1rem; right: 0.1rem; z-index: 999999;}
.end .tip{ font-size: 0.18rem; width: 100%; position: absolute; text-align: center; bottom: 1.65rem; left: 0;}
.end .phone{  position: absolute; bottom: 1rem; left: 50%; margin-left: -1.25rem;}
.end .phone input{ width: 2.5rem; height: 0.5rem;line-height: 0.5rem; background: #000; border: none; color: #fff; font-size: 0.4rem; text-align: center; font-family: fzktjt;}
.end .true{width: 1.6rem; height: 0.6rem; display: block; position: absolute; bottom: 0.4rem; left: 50%; margin-left: -0.8rem;}
.end .true img{ width: 100%; height: 100%;}
.end .no_pic{display: none; width: 2.2rem; height: 2.3rem; overflow: hidden; position: absolute; left: 50%; margin-left: -1.1rem; top: 1.6rem;}
.end .no_pic img{ width: 2.2rem;}
.end .yes_pic{display: none;}
.end .yes_pic .text{ color: #fff; text-align: center; position: absolute; top: 0.3rem; left: 0; font-size: .4rem; width: 100%}
.end .yes_pic .text p{ text-align: center; width: 100%}
.end .yes_tip{ font-size: 0.18rem; width: 100%; position: absolute; text-align: center; top: 1.8rem; left: 0;}
.end .yes_pic .pic{ width: 2.2rem;position: absolute; left: 50%; margin-left: -1.1rem; top: 2.0rem;}
/*+1*/
.num{position: absolute;top: 2.7rem;right: 0.8rem;}
.num.animate{animation: move 1.5s linear forwards;}
@keyframes move{
    0%{top: 2.7rem;right: 0.8rem;opacity: 1;width: 0.6rem; height: 0.5rem;}
    33.3%{top: 2.4rem;right: 1.1rem;opacity: 0.8;width: 0.4rem; height: 0.33rem;}
    66.6%{top: 2.1rem;right: 1.5rem;opacity: 0.5;width: 0.3rem; height: 0.22rem;}
    100%{top: 1.8rem;right: 1.5rem;opacity: 0;width: 0.2rem; height: 0.15rem;}
}
@-webkit-keyframes move{
    0%{top: 2.7rem;right: 0.8rem;opacity: 1;width: 0.6rem; height: 0.5rem;}
    33.3%{top: 2.4rem;right: 1.1rem;opacity: 0.8;width: 0.4rem; height: 0.33rem;}
    66.6%{top: 2.1rem;right: 1.5rem;opacity: 0.5;width: 0.3rem; height: 0.22rem;}
    100%{top: 1.8rem;right: 1.5rem;opacity: 0;width: 0.2rem; height: 0.15rem;}
}

.num img{ width: 100%;}
